<template>
	<div class="login">
		<el-carousel height="100vh" class="carousel">
			<el-carousel-item v-for="item in 4" :key="item">
				<img width="100%" :src="require('../../assets/images/'+item+'.jpg')" />
			</el-carousel-item>
		</el-carousel>
		<div class="loginBlock">
			<h3>登录 <span>欢迎使用悦朋软件</span></h3>
			<el-form label-position="left" label-width="0px" :model="user" :rules="rules">
				<el-form-item label="" prop="name">
					<el-input v-model="user.name" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item label="" prop="password">
					<el-input v-model="user.password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock">
					</el-input>
				</el-form-item>
				<el-form-item label=""  prop="yzm">
					<el-input v-model="user.yzm" placeholder="验证码" style="width:50%"></el-input>
					<img src="http://dida100.com/include/vdimgck.php" alt="">
				</el-form-item>
				<p>
					<a href="">立即注册</a>
					<a href="">忘记密码</a>
				</p>
				<el-form-item>
					<el-button type="primary" style="width: 100%;" @click="$store.dispatch('login',user)">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: "",
					password: "",
					yzm: ""
				},
				rules: {
					name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						
						{
							min: 3,
							max: 28,							 
							message: '长度在 3 到 28个字符',
							trigger: 'blur'
						},
						/* {							
							pattern:/^1\d{10}/,
							message: '电话号码格式不正确',
							trigger: 'blur'
						} */
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 28,
							message: '长度在6 到 28个字符',
							trigger: 'blur'
						}
					],
					yzm: [{
							required: true,
							message: '4位数验证码',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 4,
							message: '长度是4位',
							trigger: 'blur'
						}
					],

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBlock {
		width: 360px;
		height: 360px;
		border-radius: 12px;
		background-color: #fff;
		box-shadow: 0 2px 4px #ccc;
		position: absolute;
		right: 200px;
		top: 50%;
		transform: translate(0, -50%);
		box-sizing: border-box;
		z-index: 20000;
		padding: 30px
	}

	.login {
		width: 100%;
		height: 100vh;
		position: relative;

	}

	.carousel {
		height: 100%;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
</style>
